<template>
  <div class="business">
    <div class="tilit">
      <h1>加班申请</h1>
      <i class="el-icon-edit"></i>
      <i class="el-icon-edit"></i>
      <i class="el-icon-more"></i>
    </div>

    <!-- headers 设置上传请求头 -->
    <!-- data 上传请求需要携带的参数 -->
    <!-- action 上传地址 -->
    <!-- name 上传字段, 字段值必须是 excel -->
    <!-- on-success 文件上传成功时的回调 -->
    <div class="opens">
      <el-button type="warning" @click="drawer = true">发起新的</el-button>
      <el-upload
        class="upload"
        :show-file-list="false"
        :on-success="onSuccess"
        :headers="headers"
        :data="{ userid: userinfo._id }"
        name="excel"
        action="/api/work/import"
      >
        <el-button>导入</el-button>
      </el-upload>
      <el-button
        ><el-link
          :underline="false"
          :href="'/api/work/download?userid=' + userinfo._id"
          >导出</el-link
        ></el-button
      >
    </div>

    <!-- 表格 -->
    <div class="main">
      <el-tabs v-model="activeName">
        <el-tab-pane label="待办事项" name="1">
          <!-- 表格 -->
          <MyTable
            :columns="columns"
            :businesslist="businesslist"
            :total="total"
            :Ym="Ym"
            :deleteRow="deleteRow"
          >
          </MyTable>
        </el-tab-pane>

        <el-tab-pane label="已办事项" name="2">404</el-tab-pane>
        <el-tab-pane label="抄送事项" name="3">404</el-tab-pane>
        <el-tab-pane label="我发起的" name="4">404</el-tab-pane>
        <el-tab-pane label="全部数据" name="5">404</el-tab-pane>
        <el-tab-pane label="概述" name="6">404</el-tab-pane>
        <el-tab-pane label="统计报表" name="7">
          <!-- 绘制图表的位置 -->
          <MyEcharts></MyEcharts>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 抽屉 -->
    <el-drawer :show-close="false" :visible.sync="drawer">
      <el-form
        :rules="rules"
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="business-box"
      >
        <h3 class="title">加班申请</h3>
        <el-form-item label="申请人" prop="name">
          <el-input
            type="text"
            v-model="ruleForm.name"
            autocomplete="off"
            placeholder="申请人"
          ></el-input>
        </el-form-item>

        <el-form-item label="加班类型" prop="type">
          <el-select v-model="ruleForm.type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="事由说明" prop="reason">
          <el-input
            type="textarea"
            v-model="ruleForm.reason"
            autocomplete="off"
            placeholder="事由说明"
          ></el-input>
        </el-form-item>

        <el-form-item label="开始日期" prop="starttime">
          <el-date-picker
            type="date"
            v-model="ruleForm.starttime"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="结束日期" prop="endtime">
          <el-date-picker
            v-model="ruleForm.endtime"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="加班时长" prop="hours">
          <el-input
            type="text"
            v-model="ruleForm.hours"
            autocomplete="off"
            placeholder="加班时长"
          ></el-input>
        </el-form-item>

        <el-form-item class="register-footer">
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import MyEcharts from "../../components/MyEcharts.vue";
import MyTable from "../../components/MyTable.vue";
import { mapState } from "vuex";
import { get_workAdd, get_workList, get_workDelete } from "../../utlis/api";
export default {
  data() {
    //申请人姓名
    var validateName = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error("请输入正确的申请人姓名！！！"));
      } else {
        callback();
      }
    };
    //出差事由
    var validateReason = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入出差事由！！！"));
      } else {
        callback();
      }
    };
    //出发日期
    var validateStarttime = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入正确出发日期！！！"));
      } else {
        callback();
      }
    };
    //返回日期
    var validateEndtime = (rule, value, callback) => {
      if (!value || new Date(this.ruleForm.starttime) - new Date(value) > 0) {
        this.ruleForm.hours = 0;
        callback(new Error("请输入正确返回日期！！！"));
      } else {
        //计算总天数
        this.ruleForm.hours =
          (new Date(value) - new Date(this.ruleForm.starttime)) /
            (60 * 60 * 1000) +
          1;
        callback();
      }
    };
    //出差总天数
    var validateDays = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error("请输入正确的出差总天数！！！"));
      } else {
        callback();
      }
    };
    return {
      activeName: "1", //点击切花
      headers: { Authorization: "Bearer " + localStorage.getItem("token") }, //请求头
      page: 1, //页码
      total: 0, //出差申请总数
      drawer: false, //控制抽屉组件是否显示
      businesslist: [],
      ruleForm: {
        name: this.$store.state.userinfo.name,
        reason: "",
        starttime: "",
        endtime: "",
        hours: 0,
        type: "",
      },
      rules: {
        //validator:验证器，    trigger：触发器
        name: [{ validator: validateName, trigger: "blur" }],
        reason: [{ validator: validateReason, trigger: "blur" }],
        starttime: [{ validator: validateStarttime, trigger: "blur" }],
        endtime: [{ validator: validateEndtime, trigger: "blur" }],
        hours: [{ validator: validateDays, trigger: "blur" }],
      },
      options: [
        {
          value: "0",
          label: "工作日加班",
        },
        {
          value: "1",
          label: "周末加班",
        },
        {
          value: "2",
          label: "节假日加班",
        },
      ],
      columns: [
        {
          prop: "_id",
          label: "编号",
        },
        {
          prop: "status",
          label: "当前流程状态",
          formatter: this.formatter_status,
        },
        {
          prop: "name",
          label: "申请人",
        },
        {
          prop: "type",
          label: "加班类型",
          formatter: this.formatter_punch,
        },
        {
          prop: "reason",
          label: "事由说明",
        },
        {
          prop: "starttime",
          label: "开始日期",
          formatter: this.formatter_time,
        },
        {
          prop: "endtime",
          label: "结束日期",
          formatter: this.formatter_time,
        },
        {
          prop: "hours",
          label: "加班时长",
        },
        {
          prop: "starttime",
          label: "申请时间",
          formatter: this.formatter_time,
        },
      ],
    };
  },
  components: {
    MyTable,
    MyEcharts,
  },
  mounted() {
    get_workList({ userid: this.userinfo._id, page: 1 }).then((res) => {
      this.businesslist = res.data.list;
      this.total = res.data.total;
    });
  },
  computed: {
    ...mapState(["userinfo"]),
  },
  //局部刷新
  inject: ["reload"],
  methods: {
    submitForm() {
      //获取Form组件的实例, 调用实例的方法( validate内部会依次调用每一个 表单项的验证器 实现表单验证 )
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // console.log(this.ruleForm);
          get_workAdd({ userid: this.userinfo._id, ...this.ruleForm }).then(
            (res) => {
              console.log(res.data);
              if (res.data.code == 200) {
                this.$message.success(res.data.msg);
                this.drawer = false; //隐藏抽屉
                this.reload(); //调用方法实现局部的刷新
              } else {
                this.$message.error(res.data.msg);
              }
            }
          );
        } else {
          console.log("验证失败");
        }
      });
    },
    //打卡类型
    formatter_punch(row, column, cellValue, index) {
      if (cellValue == "0") {
        return (cellValue = "工作日加班");
      } else if (cellValue == "1") {
        return (cellValue = "周末加班");
      } else if (cellValue == "2") {
        return (cellValue = "节假日加班");
      }
    },
    //流程状态
    formatter_status(row, column, cellValue, index) {
      return cellValue == 0 ? "待审批" : "已通过";
    },
    //两位数时分秒
    formater_num(num) {
      return num < 10 ? "0" + num : num;
    },
    //时间
    formatter_time(row, column, cellValue, index) {
      let d = new Date(cellValue);
      return `${d.getFullYear()}-${this.formater_num(
        d.getMonth() + 1
      )}-${this.formater_num(d.getDate())} ${this.formater_num(d.getHours())}:${this.formater_num(d.getMinutes())}`;
    },
    //页码
    Ym(val) {
      this.page = val; //保存页码
      //请求对应页码的数据
      get_workList({ userid: this.userinfo._id, page: val }).then((res) => {
        this.businesslist = res.data.list;
      });
    },
    //删除
    deleteRow(id) {
      //删除对应id的 出差申请
      get_workDelete({ userid: this.userinfo._id, id, page: this.page }).then(
        (res) => {
          this.businesslist = res.data.list;
          this.total = res.data.total;
          this.$message.success(res.data.msg);
        }
      );
    },
    onSuccess(res) {
      if (res.code == 200) {
        this.$message.success(res.msg);
      } else {
        this.$message.error(res.msg);
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.business {
  .tilit {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 0 20px;
    h1 {
      margin-right: 20px;
    }
    i {
      margin-right: 20px;
    }
  }
  .opens {
    margin: 20 0px;
    display: flex;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    padding: 0px 20px;
    .upload {
      margin: 0 20px;
    }
  }
  .business-box {
    padding: 20px;
    .title {
      margin-bottom: 20px;
    }
  }
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  .main {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
  }
}
</style>